<template>
  <div class="find_product">
    <ul>
      <li
        v-for="item in goodslist"
        :key="item.goodsId"
        class="col-12-6"
        id="cms_wap_find_goods_25788540"
      >
        <div class="cent">
          <a
            ui-jsbridge
            data-params="{ jump_type: 1,jump_value:25788540}"
            style="height:180px;"
            class="img ui-act-label"
          >
            <img
              ui-lazyload
              :src="item.imageUrl"
              alt
              isload="true"
              style="background: rgb(245, 245, 245); display: inline;"
              @click="clickItemGoods(item)"
            />
          </a>
          <div class="mar">
            <a ui-jsbridge data-params="{ jump_type: 1,jump_value:25788540}">
              <div>
                <h3 class="product_title" @click="clickItemGoods(item)">
                  <span class="title_text">{{ item.title }}</span>
                </h3>
              </div>
              <div class="product_info">
                <div class="price">
                  <div class="price-bottom" @click="clickItemGoods(item)">
                    <span class="RMB">¥</span>
                    <span class="price_num">{{ item.marketPriceStr }}</span>
                  </div>
                  <div class="zhe">
                    <span class="red_bubble" @click="clickItemGoods(item)">
                      {{ item.discountBenefitStr }}
                    </span>
                  </div>
                  <span class="shop">
                    <van-icon
                      name="shopping-cart-o"
                      size=".18rem"
                      color="#c9b078"
                      @click="addCart(item)"
                    />
                  </span>
                </div>
              </div>
            </a>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
import { addCart, editCartList, editGoodsList } from "@/api/goods.js";
import { getCartList } from "@/api/cart.js";
import Vue from "vue";
import { Icon, Toast } from "vant";

Vue.use(Icon);
Vue.use(Toast);
export default {
  props: ["goodslist"],
  data() {
    return {
      list: [],
      isCart: false,
    };
  },
  created() {},
  computed: {},
  methods: {
    //点击跳转到商品详情页
    clickItemGoods(item) {
      this.$router.push(`/goodsDetail/${item.goodsId}`);
    },
    //添加到购物车
    async addCart(goodsItem) {
      //获取购物车数据列表
      let list = await getCartList({});
      let data = list.data;
      
      //设置一个记录购物车id的数组
      let idList = [];
      data.forEach((item) => {
        idList.push(item.goodsId);
      });
      //遍历购物车列表
      data.forEach(async (item) => {
        if (item.goodsId === goodsItem.goodsId) {
          //修改购物车列表数据
          item.num++;
          await editCartList(item);
          //修改商品库存
          item.stoc--;
          await editGoodsList(item);
          this.isCart = true;
        }
      });
      //查询如果购物车中没有该商品，就添加商品
      if (!this.isCart && idList.indexOf(goodsItem.goodsId) < 0) {
        await addCart(goodsItem);
        this.isCart = false;
      }
      Toast("加入购物车成功");
    },
  },
};
</script>

<style lang="stylus" scoped>
.find_product ul {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  width:98%;
  padding-left:2%;

}
.find_product ul li {
  margin-top: 10px;
  border-radius: 5px;
  background: #fff;
  overflow: hidden;
  width: 48%;
}

.find_product ul li .cent img {
  width: 100%;
  height: 100%;
  border-radius: 5px 5px 0 0;
}

.find_product ul li .cent > a {
  display: block;
  width: 100%;
  max-height: 173px;
  border-radius: 5px 5px 0 0;
}

.find_product .mar {
  padding: 15px 9px 9px 10px;
  box-sizing: border-box;
  margin: 0 !important;
}

.find_product .mar > a {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.find_product .mar .labelTop {
  position: relative;
  z-index: 1;
  zoom: 1;
  top: 2px;
}

.find_product .mar .product_title {
  font-size: 13px;
  font-weight: 400;
  color: #333;
  overflow: hidden;
  text-overflow: ellipsis;
  align-items: center;
  line-height: 20px;
  padding-right: 10px;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  margin-bottom: 5px;
}

.find_product .mar .product_title .tb {
  min-width: 29px;
  height: 13px;
  background-color: linear-gradient(142deg, #ff8c02 0, #ff5000 100%);
  border-radius: 2px;
  // background-image: url(../common/images/tb.png?v=2020-04-09);
  display: inline-block;
  background-size: 29px 13px;
  background-repeat: no-repeat;
  background-position: center;
  margin-right: 3px;
}

.find_product .mar .product_title .tm {
  min-width: 23px;
  height: 13px;
  border-radius: 2px;
  background-image: url("/common/images/tm.png?v=2020-04-09");
  display: inline-block;
  margin-right: 3px;
  background-size: 23px 13px;
  background-repeat: no-repeat;
  background-position: center;
}

.find_product .mar .product_title .tmcs,
.find_product .mar .product_title .tmgj {
  min-width: 40px;
  height: 13px;
  padding: 2px;
  box-sizing: border-box;
  display: inline-block;
  background-position: center;
  background-size: 36px 9px;
  background-repeat: no-repeat;
  top: 2px;
  margin-right: 3px;
  position: relative;
  z-index: 1;
  border-radius: 2px;
  zoom: 1;
}

.find_product .mar .product_title .tmgj {
  background-color: #9318fe;
  background-image: url("/common/images/tm.png?v=2020-04-09");
}

.find_product .mar .product_title .tmcs {
  background-color: #2db616;
  //   background-image: url(../common/images/tmchaoshi.png?v=2020-04-09)
}

.find_product .mar .price {
  font-size: 10px;
  font-weight: 400;
  color: #666;
  margin-bottom: -1px;
  display: flex;
  align-items: baseline;
  vertical-align: text-bottom;
}

.find_product .mar .price .ju {
  background: url("/common/images/juhuasuan.png?v=2020-04-09") center no-repeat;
  width: 12px;
  height: 12px;
  background-size: 100%;
  margin-right: 3px;
  position: relative;
  z-index: 1;
  zoom: 1;
  top: 2px;
}

.find_product .mar .price .qiang {
  background: url("/common/images/qiang.png?v=2020-04-09") center no-repeat;
  position: relative;
  z-index: 1;
  zoom: 1;
  top: 2px;
  width: 12px;
  height: 12px;
  background-size: 100%;
  margin-right: 3px;
}

.find_product .mar .price .RMB {
  font-size: 12px;
  font-weight: 500;
  color: #c9b078;
  margin-left: 1px;
}

.find_product .mar .price .price_num {
  font-size: 19px;
  font-weight: 500;
  color: #c9b078;
}

.find_product .mar .price .red_bubble {
  position: relative;
  z-index: 1;
  zoom: 1;
  font-size: 9px;
  font-weight: 400;
  color: #fff;
  background: linear-gradient(150deg, #c9b078 0, #fb8d2c 100%);
  line-height: 12px;
  padding: 0 3px;
  margin-left: 5px;
  top: -2px;
  display: inline-block;
  height: 12px;
}

.find_product .mar .price .red_bubble .triangle {
  position: absolute;
  zoom: 1;
  left: -4px;
  top: 0;
  width: 0;
  height: 0;
  z-index: -1;
  border-color: #f8403a transparent transparent;
  border-width: 6px 8px;
  border-style: solid;
  transform: rotate(0);
}

.find_product .mar .label_box {
  margin: 2px 0;
}

.find_product .mar .label_box p {
  display: inline;
}

.find_product .mar .label_box .juan {
  height: 14px;
  background: linear-gradient(90deg, #ff8873 0, #ff4f4f 100%);
  border-radius: 2px;
  padding: 0 5px 0 1px;
  font-size: 9.5px;
  font-weight: 400;
  color: #fff;
  line-height: 14px;
  display: inline-block;
  position: relative;
  z-index: 1;
  zoom: 1;
  top: 0;
  vertical-align: middle;
}

.find_product .mar .label_box .juan span {
  background: #fff;
  border-radius: 1px 0 0 1px;
  font-size: 10px;
  color: #fe3a33;
  margin: auto 5px auto 0;
  min-width: 12px;
  max-width: 12px;
  min-height: 12px;
  max-height: 12px;
  display: inline-block;
  line-height: 12px;
  text-align: center;
  vertical-align: middle;
}

.find_product .mar .label_box .label {
  height: 12px;
  border-radius: 2px;
  border: 1px solid;
  font-size: 9.5px;
  font-weight: 400;
  color: #ff0137;
  padding: 0 3px;
  margin-right: 5px;
  display: inline-block;
  line-height: 12px;
  vertical-align: middle;
}

.find_product .mar .label_box .label.label1 {
  border-color: rgba(255, 1, 55, 0.55);
  color: #ff0137;
}

.find_product .mar .label_box .label.label2 {
  border-color: rgba(245, 114, 36, 0.7);
  color: #f57223;
}

.find_product .mar .label_box .label.label3 {
  border-color: rgba(192, 24, 255, 0.7);
  color: #c018ff;
}

.find_product .mar .salse span {
  font-size: 10px;
  font-weight: 400;
  color: #888;
}

.find_product .mar .salse span:nth-child(2)::before {
  content: "";
  width: 1px;
  background: #888;
  margin: 0 5px;
  display: inline-block;
  height: 8px;
  position: relative;
  z-index: 1;
  zoom: 1;
  top: 1px;
}

.find_product .mar .active_title_label {
  height: 13px;
  margin-left: 3px;
}

.find_product .mar .active_title_label img {
  height: 13px;
  width: auto;
  vertical-align: inherit !important;
  transform: translateY(2px);
}
.price
    display flex
    align-items center
    justify-content center
    .price-bottom
       width .6rem
    .zhe
        flex 1
    .shop
        width .4rem
</style>
